<template>
  <div class="more_list">
    <el-dropdown trigger="click" @command="moreHandleCommand">
      <slot v-if="isSlot"></slot>
      <div v-else class="iconBox">
        <el-icon><MoreFilled /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item class="Dropdown_item_menu" v-if="rowItem.type == 'file'" command="preview" :icon="View">
            {{ $t('teamDoc.rightBtnList.preview') }}
          </el-dropdown-item>
          <el-dropdown-item
            class="Dropdown_item_menu"
            :disabled="judgePermission('download')"
            v-if="rowItem.type == 'file'"
            :icon="EditPen"
            command="edit"
          >
            {{ $t('teamDoc.rightBtnList.edit') }}
          </el-dropdown-item>

          <el-dropdown-item class="Dropdown_item_menu border_bottom" :icon="Download" :disabled="judgePermission('download')" command="download">
            {{ $t('teamDoc.rightBtnList.download') }}
          </el-dropdown-item>
          <!-- ------------------------------------ -->
          <el-dropdown-item command="copy" :icon="DocumentCopy" :disabled="judgePermission('copy')" class="Dropdown_item_menu">
            {{ $t('teamDoc.rightBtnList.copy') }}
          </el-dropdown-item>

          <el-dropdown-item command="move" :disabled="judgePermission('move')" class="Dropdown_item_menu" :icon="Scissor">
            {{ $t('teamDoc.rightBtnList.move') }}
          </el-dropdown-item>

          <el-dropdown-item command="delete" :disabled="judgePermission('delete')" class="Dropdown_item_menu" :icon="Delete">
            {{ $t('teamDoc.rightBtnList.delete') }}
          </el-dropdown-item>

          <el-dropdown-item class="Dropdown_item_menu border_bottom" command="rename" :disabled="judgePermission('update')" :icon="Key">
            {{ $t('teamDoc.rightBtnList.rechristen') }}
          </el-dropdown-item>
          <!-- ------------------------------------ -->
          <el-dropdown-item class="Dropdown_item_menu" command="label" :icon="Collection">
            {{ $t('teamDoc.rightBtnList.tags') }}
          </el-dropdown-item>

          <el-dropdown-item class="Dropdown_item_menu" command="outEnjoy" :disabled="judgePermission('distribute')" :icon="MessageBox">
            {{ $t('teamDoc.rightBtnList.distribute') }}
          </el-dropdown-item>

          <!--
          <el-dropdown-item class="Dropdown_item_menu border_bottom" command="enjoy" :disabled="judgePermission('share')" :icon="Share">
            {{ $t('teamDoc.rightBtnList.share') }}
          </el-dropdown-item> -->

          <el-dropdown-item class="Dropdown_item_menu" command="">
            <el-dropdown placement="left-start" trigger="hover" @command="moreHandleCommand">
              <div class="el-dropdown-link personalization">
                <div style="display: flex; align-items: center">
                  <el-icon><MoreFilled /></el-icon>
                  <span>{{ $t('teamDoc.rightBtnList.more') }}</span>
                </div>
                <el-icon><CaretRight /></el-icon>
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item class="Dropdown_item_menu" v-if="rowItem.type == 'file'" :icon="User" command="templateLibrary">
                    {{ $t('teamDoc.rightBtnList.personalTemplateLibrary') }}
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu" v-if="rowItem.type == 'file'" command="publicTemplateLibrary" :icon="FullScreen">
                    {{ $t('teamDoc.rightBtnList.commonTemplateLibrary') }}
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu" command="enterpriseLabel" :icon="Plus">
                    {{ $t('teamDoc.rightBtnList.submitEnterprise') }}
                  </el-dropdown-item>

                  <el-dropdown-item
                    class="Dropdown_item_menu"
                    command="Expert"
                    v-if="
                      (rowItem.expert != 'true' &&
                        rowItem.type == 'file' &&
                        ['csv', 'md', 'html', 'docx', 'xlsx', 'xls', 'txt', 'pdf', 'markdown', 'htm'].includes(rowItem.suffix)) ||
                      rowItem.type == 'folder'
                    "
                    :icon="Upload"
                  >
                    专家知识库
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu" command="Expert" v-if="rowItem.expert == 'true'" :icon="Upload">
                    重新提交专家知识库
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-dropdown-item>

          <!-- ------------------------------------ -->
          <!-- <el-dropdown-item class="Dropdown_item_menu" command="">
            <el-dropdown placement="left-start" trigger="hover" @command="moreHandleCommand">
              <div class="el-dropdown-link personalization">
                <div>
                  <el-icon><MoreFilled /></el-icon>
                  <span>{{ $t('teamDoc.rightBtnList.more') }}</span>
                </div>
                <el-icon><CaretRight /></el-icon>
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item class="Dropdown_item_menu" :icon="Plus" command="submitFileToTeam">
                    提交到团队
                    {{ $t('teamDoc.rightBtnList.commitTeam') }}
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu" command="enterRoom" :disabled="judgePermission('commitEnterprise')" :icon="Plus">
                    {{ $t('teamDoc.rightBtnList.submitEnterprise') }}
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu_more" :icon="CirclePlus" command="joinTemplates">
                    {{ $t('teamDoc.rightBtnList.joinTemplates') }}
                    <el-icon><CaretRight /></el-icon>
                    <div class="info">
                      <p @click="moreHandleCommand('templateLibrary', rowItem)">{{ $t('teamDoc.rightBtnList.personalTemplateLibrary') }}</p>
                      <p @click="moreHandleCommand('publicTemplateLibrary', rowItem)">{{ $t('teamDoc.rightBtnList.commonTemplateLibrary') }}</p>
                    </div>
                  </el-dropdown-item>

                  第一句打开时注释了
                  <el-dropdown-item class="Dropdown_item_menu" :icon="Sort" v-if="proxy.$yuUtils.LicenseInfoFunc('ferry:list')" command="ferryFile">
                  <el-dropdown-item class="Dropdown_item_menu" :icon="Sort" command="ferryFile">
                    {{ $t('teamDoc.rightBtnList.inOut') }}
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu" command="invitationEdit" :icon="Link">
                    {{ $t('teamDoc.rightBtnList.inviteCollaboration') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-dropdown-item> -->
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup>
import {
  Upload,
  User,
  FullScreen,
  View,
  EditPen,
  Download,
  DocumentCopy,
  Scissor,
  Delete,
  Key,
  Collection,
  MessageBox,
  Share,
  Plus,
  CirclePlus,
  Sort,
  Link,
  CaretRight
} from '@element-plus/icons-vue';
const { proxy } = getCurrentInstance() as any;
const props = defineProps({
  pageType: {
    // self:个人,team:团队,enterprise:企业
    type: String,
    default: ''
  },
  rowItem: {
    type: Object,
    default: () => {
      return {};
    }
  },
  isSlot: {
    type: Boolean,
    default: false
  }
});

const isShowMenu0 = () => {
  if (props.rowItem.type === 'file' && ['csv', 'md', 'html', 'docx', 'xlsx', 'xls', 'txt', 'pdf', 'markdown', 'htm'].includes(props.rowItem.suffix)) {
    return true;
  } else {
    return false;
  }
};

const isShowMenu = () => {
  if (props.rowItem.type === 'file' && ['csv', 'md', 'html', 'docx', 'xlsx', 'xls', 'txt', 'pdf', 'markdown', 'htm'].includes(props.rowItem.suffix)) {
    return true;
  }
  if (props.rowItem.type === 'folder') {
    return true;
  } else {
    return false;
  }
};

const MoreListLoading = ref(false);
const emit = defineEmits(['moreHandleCommand']);
/*更多*/
const moreHandleCommand = (command) => {
  emit('moreHandleCommand', command, props.rowItem);

  if (command == 'attention') {
    props.rowItem.attention == 0 ? (props.rowItem.attention = 1) : (props.rowItem.attention = 0);
  }
};

/**权限控制 */
const judgePermission = (str: any) => {
  // console.log(str, '权限控制');
  // if (this.pageType == 'enterprise') {
  //   return !this.$yuUtils.documentsPermissionFunc([str], this.enterpriseMyRoleList);
  // } else if (this.pageType == 'team') {
  //   return !this.$yuUtils.documentsPermissionFunc([str], this.myTeamFIleRoleList);
  // } else {
  //   return false;
  // }
};

onMounted(() => {
  // console.log(props.rowItem, '拿到的数据0000');
});
</script>

<style scoped lang="scss">
.more_list {
  .iconBox {
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      color: #6698ff;
      background: rgba(102, 152, 255, 0.1);
    }

    &:focus {
      visibility: visible;
      color: #6698ff;
      background: rgba(102, 152, 255, 0.1);
    }
  }
}

:deep(.Dropdown_item_menu) {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: 14px !important;

  &:hover {
    background-color: #f5f5f5 !important;
    color: #606266;
  }
}

:deep(.Dropdown_item_menu_more) {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: 14px !important;
  box-sizing: border-box;
  position: relative !important;

  .info {
    display: none;
  }

  &:hover {
    .info {
      display: block;
      position: absolute !important;
      left: 120px;
      top: -50%;
      width: 100px;
      height: 100px;
      background-color: white;
      padding: 10px 0px;
      p {
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 35px;

        &:hover {
          background-color: #f5f5f5 !important;
          color: #606266;
        }
      }
    }
    background-color: #f5f5f5 !important;
    color: #606266;
  }
}

:deep(.border_bottom) {
  border-bottom: 1px solid #dcdfe6 !important;
}

.personalization {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #606266 !important;
}
</style>
